<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label v-show="false" class="el-form-item-label">{{ dialogVisible=crud.status.cu>0?dialogVisible:false }}</label>
        <label class="el-form-item-label">客户名称</label>
        <el-input v-model="query.chcCustName" clearable placeholder="客户名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">机会概要</label>
        <el-input v-model="query.chcTitle" clearable placeholder="机会概要" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">联系人</label>
        <el-input v-model="query.chcLinkman" clearable placeholder="联系人" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="800px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="20%">
          <span v-if="dialogVisible">
            <el-radio-group v-model="size">
              <el-radio label="">默认</el-radio>
              <el-radio label="medium">中等</el-radio>
              <el-radio label="small">小型</el-radio>
              <el-radio label="mini">超小</el-radio>
            </el-radio-group>
            <el-descriptions :column="2" border :size="size">
              <el-descriptions-item label="机会编号">{{ form.chcId }}</el-descriptions-item>
              <el-descriptions-item label="机会来源">
                {{ form.chcSource }}</el-descriptions-item>
              <el-descriptions-item label="客户名称">
                {{ form.chcCustName }}</el-descriptions-item>
              <el-descriptions-item label="成功机率(%)">
                <el-progress type="circle" :percentage="Number(form.chcRate) > 100?100:Number(form.chcRate)" />
              </el-descriptions-item>
              <el-descriptions-item label="联系人">{{ form.chcLinkman }}</el-descriptions-item>
              <el-descriptions-item label="联系人电话">{{ form.chcTel }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{ form.chcCreateBy }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ form.chcCreateDate }}</el-descriptions-item>
              <el-descriptions-item label="机会描述" span="2">{{ form.chcDesc }}</el-descriptions-item>
              <el-descriptions-item label="指派给" prop="chcCreateBy">
                <el-select v-model="form.chcDueTo" filterable placeholder="请选择">
                  <el-option
                    v-for="item in dict.chc_due_to"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="指派时间" content-class-name="my-content">
                <el-date-picker v-model="form.chcDueDate" type="datetime" />
              </el-descriptions-item>
            </el-descriptions></span>

          <span v-if="(crud.status.title == '新增营销机会管理')||!dialogVisible">
            <el-form-item label="机会来源">
              <el-input v-model="form.chcSource" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="客户名称" prop="chcCustName">
              <el-input v-model="form.chcCustName" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="机会概要" prop="chcTitle">
              <el-input v-model="form.chcTitle" :rows="3" type="textarea" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="成功率" prop="chcRate">
              <el-input v-model="form.chcRate" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="form.chcLinkman" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.chcTel" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="机会描述" prop="chcDesc">
              <el-input v-model="form.chcDesc" :rows="3" type="textarea" style="width: 370px;" />
            </el-form-item>
            <el-form-item v-if="crud.status.title=='新增营销机会管理'" label="创建机会编号" prop="chcCreateId">
              {{ form.chcCreateId=Math.floor(Math.random() * (999999999 - 100000000 + 1)) + 100000000 }}
            </el-form-item>
            <el-form-item label="机会创建人" prop="chcCreateBy">
              当前用户：{{ form.chcCreateBy= user.username }}
            </el-form-item>
            <el-form-item v-if="crud.status.title == '编辑营销机会管理'" label="修改机会创建人" prop="chcCreateBy">
              <el-select v-model="form.chcCreateBy" filterable placeholder="请选择">
                <el-option
                  v-for="item in dict.chc_create_by"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="chcCreateDate">
              <el-date-picker v-model="form.chcCreateDate" type="datetime" style="width: 370px;" />
            </el-form-item>
            <el-form-item v-if="crud.status.title=='新增营销机会管理'" label="机会处理编号" prop="chcDueId">
              {{ form.chcDueId=Math.floor(Math.random() * (999999999 - 100000000 + 1)) + 100000000 }}
            </el-form-item>
            <el-form-item label="处理人">
              <el-select v-model="form.chcDueTo" filterable placeholder="请选择">
                <el-option
                  v-for="item in dict.chc_due_to"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="处理时间">
              <el-date-picker v-model="form.chcDueDate" type="datetime" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="处理状态" prop="chcStatus">
              <el-select v-model="form.chcStatus" filterable placeholder="请选择">
                <el-option
                  v-for="item in dict.chc_status"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </span>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="chcId" label="机会编号" />
        <el-table-column prop="chcSource" label="机会来源" />
        <el-table-column prop="chcCustName" label="客户名称" />
        <el-table-column prop="chcTitle" label="机会概要" />
        <el-table-column prop="chcRate" label="成功率" />
        <el-table-column prop="chcLinkman" label="联系人" />
        <el-table-column prop="chcTel" label="联系电话" />
        <el-table-column prop="chcDesc" label="机会描述" />
        <el-table-column prop="chcCreateId" label="创建机会编号" />
        <el-table-column prop="chcCreateBy" label="机会创建人">
          <template slot-scope="scope">
            {{ dict.label.chc_create_by[scope.row.chcCreateBy] }}
          </template>
        </el-table-column>
        <el-table-column prop="chcCreateDate" label="创建时间" />
        <el-table-column prop="chcDueId" label="机会处理编号" />
        <el-table-column prop="chcDueTo" label="处理人">
          <template slot-scope="scope">
            {{ dict.label.chc_due_to[scope.row.chcDueTo] }}
          </template>
        </el-table-column>
        <el-table-column prop="chcDueDate" label="处理时间" />
        <el-table-column prop="chcStatus" label="处理状态">
          <template slot-scope="scope">
            {{ dict.label.chc_status[scope.row.chcStatus] }}
          </template>
        </el-table-column>
        <el-table-column v-if="checkPer(['admin','salChance:edit','salChance:del'])" label="指派" width="70%" align="center">
          <template slot-scope="scope">
            <el-button
              v-permission="permission.edit"
              class="filter-item"
              type="success"
              width="60%"
              height="50%"
              size="small"
              @click="crud.toEdit(scope.row),dialogVisible=true"
            >指派</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="checkPer(['admin','salChance:edit','salChance:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudSalChance from '@/api/salChance'
import { mapGetters } from 'vuex'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { chcId: null, chcSource: null, chcCustName: null, chcTitle: null, chcRate: null, chcLinkman: null, chcTel: null, chcDesc: null, chcCreateId: null, chcCreateBy: null, chcCreateDate: null, chcDueId: null, chcDueTo: null, chcDueDate: null, chcStatus: null }
export default {
  name: 'SalChance',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['chc_create_by', 'chc_due_to', 'chc_status'],
  cruds() {
    return CRUD({ title: '营销机会管理', url: 'api/salChance', idField: 'chcId', sort: 'chcId,desc', crudMethod: { ...crudSalChance }})
  },
  data() {
    return {
      dialogVisible: false,
      restaurants: [],
      state: '',
      timeout: null,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value1: '',
      value2: '',
      value3: '',
      size: '',
      loading: false,

      permission: {
        add: ['admin', 'salChance:add'],
        edit: ['admin', 'salChance:edit'],
        del: ['admin', 'salChance:del']
      },
      rules: {
        chcCustName: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
        chcTitle: [
          { required: true, message: '机会概要不能为空', trigger: 'blur' }
        ],
        chcRate: [
          { required: true, message: '成功率不能为空', trigger: 'blur' }
        ],
        chcDesc: [
          { required: true, message: '机会描述不能为空', trigger: 'blur' }
        ],
        chcCreateId: [
          { required: true, message: '创建机会编号不能为空', trigger: 'blur' }
        ],
        chcCreateBy: [
          { required: true, message: '机会创建人不能为空', trigger: 'blur' }
        ],
        chcCreateDate: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ],
        chcDueId: [
          { required: true, message: '机会处理编号不能为空', trigger: 'blur' }
        ],
        chcStatus: [
          { required: true, message: '处理状态不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'chcCustName', display_name: '客户名称' },
        { key: 'chcTitle', display_name: '机会概要' },
        { key: 'chcLinkman', display_name: '联系人' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
